<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>用户总数</span>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="statistics.userCount">
              <template #suffix>
                <el-icon><User /></el-icon>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>角色总数</span>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="statistics.roleCount">
              <template #suffix>
                <el-icon><UserFilled /></el-icon>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>部门总数</span>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="statistics.deptCount">
              <template #suffix>
                <el-icon><OfficeBuilding /></el-icon>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>权限总数</span>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="statistics.permCount">
              <template #suffix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          <div class="system-info">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="系统名称">权限管理系统</el-descriptions-item>
              <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
              <el-descriptions-item label="前端框架">Vue 3 + Element Plus + Vite + Pinia</el-descriptions-item>
              <el-descriptions-item label="后端框架">FastAPI + MySQL + Tortoise-ORM</el-descriptions-item>
              <el-descriptions-item label="当前用户">{{ userStore.name }}</el-descriptions-item>
              <el-descriptions-item label="用户角色">{{ userRoles }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快捷入口</span>
            </div>
          </template>
          <div class="quick-entry">
            <el-button type="primary" @click="goToPath('/system/user')">用户管理</el-button>
            <el-button type="success" @click="goToPath('/system/role')">角色管理</el-button>
            <el-button type="warning" @click="goToPath('/system/dept')">部门管理</el-button>
            <el-button type="danger" @click="goToPath('/system/permission')">权限管理</el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>系统公告</span>
            </div>
          </template>
          <div class="notice">
            <el-timeline>
              <el-timeline-item timestamp="2023-11-15" type="primary">
                <h4>系统上线</h4>
                <p>权限管理系统正式上线，欢迎使用！</p>
              </el-timeline-item>
              <el-timeline-item timestamp="2023-11-10" type="success">
                <h4>系统测试</h4>
                <p>系统测试完成，准备上线。</p>
              </el-timeline-item>
              <el-timeline-item timestamp="2023-11-01" type="warning">
                <h4>系统开发</h4>
                <p>系统开发中，敬请期待。</p>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { useThemeStore } from '@/store/theme'
import { getUsers } from '@/api/user'
import { getRoles } from '@/api/role'
import { getDepartments } from '@/api/department'
import { getPermissions } from '@/api/permission'
import { User, UserFilled, OfficeBuilding, Lock } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

// 统计数据
const statistics = ref({
  userCount: 0,
  roleCount: 0,
  deptCount: 0,
  permCount: 0
})

// 用户角色
const userRoles = computed(() => {
  return userStore.roles.map(role => role.name).join(', ')
})

// 获取统计数据
const fetchStatistics = async () => {
  try {
    // 获取用户总数
    const userRes = await getUsers({ page: 1, page_size: 1 })
    statistics.value.userCount = userRes.page_info.total
    
    // 获取角色总数
    const roleRes = await getRoles({ page: 1, page_size: 1 })
    statistics.value.roleCount = roleRes.page_info.total
    
    // 获取部门总数
    const deptRes = await getDepartments({ page: 1, page_size: 1 })
    statistics.value.deptCount = deptRes.page_info.total
    
    // 获取权限总数
    const permRes = await getPermissions({ page: 1, page_size: 1 })
    statistics.value.permCount = permRes.page_info.total
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 页面跳转
const goToPath = (path) => {
  router.push(path)
}

onMounted(() => {
  fetchStatistics()
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 0;
  
  .dashboard-card {
    height: 180px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    background-color: var(--card-bg-color);
    
    &:hover {
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
    }
    
    :deep(.el-card__header) {
      background-color: var(--header-bg-color);
      border-bottom: 1px solid var(--border-color);
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        span {
          color: var(--text-color);
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
    
    :deep(.el-card__body) {
      background-color: var(--card-bg-color);
      padding: 20px;
    }
    
    .card-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      background-color: var(--card-bg-color);
      
      :deep(.el-statistic__content) {
        color: #409eff;
        font-weight: 600;
        font-size: 28px;
        
        .el-icon {
          margin-left: 8px;
          font-size: 24px;
        }
      }
    }
  }
  
  .el-row {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .el-card {
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: var(--card-bg-color);
    
    &:hover {
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
    }
    
    :deep(.el-card__header) {
      background-color: var(--header-bg-color);
      border-bottom: 1px solid var(--border-color);
      border-radius: 8px 8px 0 0;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        span {
          color: var(--text-color);
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
    
    :deep(.el-card__body) {
      background-color: var(--card-bg-color);
      padding: 20px;
    }
  }
  
  .system-info {
    margin-bottom: 20px;
    
    :deep(.el-descriptions) {
      background-color: var(--card-bg-color);
      
      .el-descriptions__header {
        background-color: var(--header-bg-color);
      }
      
      .el-descriptions__body {
        background-color: var(--card-bg-color);
        
        .el-descriptions__table {
          .el-descriptions__cell {
            border-color: var(--border-color);
            
            &.is-bordered-label {
              background-color: var(--header-bg-color);
              color: var(--text-color);
              font-weight: 500;
            }
            
            &.is-bordered-content {
              background-color: var(--card-bg-color);
              color: var(--text-color);
            }
          }
        }
      }
    }
  }
  
  .quick-entry {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0;
    
    .el-button {
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }
  
  .notice {
    padding: 0 20px;
    
    :deep(.el-timeline) {
      .el-timeline-item__node {
        background-color: var(--menu-active-color);
      }
      
      .el-timeline-item__tail {
        border-left-color: var(--border-color);
      }
      
      .el-timeline-item__wrapper {
        .el-timeline-item__timestamp {
          color: var(--text-color);
          opacity: 0.8;
        }
        
        .el-timeline-item__content {
          color: var(--text-color);
          
          h4 {
            color: var(--text-color);
            margin-bottom: 8px;
          }
          
          p {
            color: var(--text-color);
            opacity: 0.8;
            line-height: 1.6;
          }
        }
      }
    }
  }
}
</style>
